<template>
    <div class="page">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <h5>快件库</h5>
                                </el-col>
                                <el-col :span="3">
                                    <el-select size="medium" v-model="queryParams.service_id" clearable filterable placeholder="所属站点" @change="serviceChange">
                                        <el-option
                                            v-for="(v,k) in stationList"
                                            :key="k"
                                            :label="v.designation"
                                            :value="v.id">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="3" >
                                    <el-select size="medium" v-model="queryParams.type" clearable filterable placeholder="快件类型" @change="typeChange">
                                        <el-option
                                            v-for="(v,k) in type"
                                            :key="k"
                                            :label="v"
                                            :value="k">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="3">
                                    <el-select size="medium" v-model="queryParams.status" clearable filterable placeholder="快件状态" @change="statusChange">
                                        <el-option
                                            v-for="(v,k) in status"
                                            :key="k"
                                            :label="v"
                                            :value="k+1">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <div class="block">
                                        <el-date-picker size="medium" v-model="queryParams.created_at" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                        </el-date-picker>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-input size="medium" placeholder="请输入快递单号" v-model="queryParams.single_number"  class="input-with-select">
                                        <el-button size="medium" slot="append" icon="el-icon-search" @click="queryExpress"></el-button>
                                    </el-input>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="24" :xs="24" :sm="24" :lg="24">
                                    <el-table :data="expressData.data" style="width: 100%" v-loading="listLoading" @row-click="rowClick">
                                        <el-table-column
                                            prop="order_id"
                                            label="订单编号">
                                        </el-table-column>
                                        <el-table-column
                                            prop="created_at"
                                            label="入库时间">
                                        </el-table-column>
                                        <el-table-column
                                            prop="single_number"
                                            label="快递单号">
                                        </el-table-column>
                                        <el-table-column
                                            prop="service_name"
                                            label="站点">
                                        </el-table-column>
                                        <el-table-column
                                            prop="network_name"
                                            label="网点">
                                        </el-table-column>
                                        <el-table-column
                                            label="订单类型">
                                            <template slot-scope="scope">{{type[scope.row.type]}}</template>
                                        </el-table-column>
                                        <el-table-column
                                            label="快件状态">
                                            <template slot-scope="scope">{{status[(scope.row.status-1)]}}</template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="label"
                                            label="标记">
                                        </el-table-column>
                                        <el-table-column
                                            prop="take_code"
                                            label="取件码">
                                        </el-table-column>
                                        <el-table-column
                                            label="派件员">
                                            <template slot-scope="scope">{{scope.row.courier_name}}<br>{{scope.row.courier_phone}}</template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="to_mobile"
                                            label="收件人">
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="panel-footer text-right">
                            <el-pagination @size-change="sizeChange" @current-change="currentChange"
                                           :current-page="queryParams.page"
                                           :page-sizes="[5, 10, 20, 50]"
                                           :page-size="queryParams.paginate"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="expressData.total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!--编辑快件信息对话框-->
        <el-dialog :visible.sync="editDialog" width="40%" :before-close="handleEditClose">
            <span slot="title" class="dialog-header">
                <el-row>
                    <el-col :span="6">
                        <span style="font-size: 20px;">{{type[editParams.type]}}</span><h4>{{status[(editParams.status-1)]}}</h4><h5>{{editParams.network_name}}</h5>
                    </el-col>
                    <el-col :span="18" v-if="editBtn">
                        <el-row v-if="editing">
                            <el-col :span="6" :offset="10" ><el-button type="warning" style="background: rgba(248,154,55,1);"  @click="editQuery">保存</el-button></el-col>
                            <el-col :span="6" ><el-button type="danger"  @click="delQuery">删除</el-button></el-col>
                        </el-row>
                        <el-row v-else>
                            <el-col :span="6" :offset="10"><el-button type="warning" style="background: rgba(248,154,55,1);"  @click="enableEdit">编辑</el-button></el-col>
                            <el-col :span="6" ><el-button type="danger"  @click="delQuery">删除</el-button></el-col>
                        </el-row>
                    </el-col>
                 </el-row>
                <el-row>
                    <el-tabs v-model="activeNameForEdit" @tab-click="tabClickForEdit">
                        <el-tab-pane label="快件信息" name="info">
                            <el-form ref="editForm" :rules="editRule" :model="editParams" label-width="110px">
                                <el-form-item label="快递单号：">
                                    <p>{{editParams.single_number}}</p>
                                </el-form-item>
                                <el-form-item label="快递公司：">
                                    <p>{{editParams.express_name}}</p>
                                </el-form-item>
                                <el-form-item label="站点：">
                                    <p>{{editParams.service_name}}</p>
                                </el-form-item>
                                <el-form-item label="网点：" prop="network_id">
                                    <el-select v-model="editParams.network_id" :disabled="!editing"  filterable placeholder="请选择网点">
                                        <el-option
                                            v-for="item in networkData.data"
                                            :key="item.network.id"
                                            :label="item.network.designation"
                                            :value="item.network.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="快件状态：" prop="status">
                                    <el-select v-model="editParams.status" :disabled="!editing"  filterable placeholder="请选择快件状态">
                                        <el-option
                                            v-for="(v,k) in status"
                                            :key="k"
                                            :label="v"
                                            :value="k+1">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="标记：">
                                     <el-radio-group v-model="editParams.label" @change="labelChange">
                                         <el-radio :disabled="!editing" label="">无</el-radio>
                                         <el-radio :disabled="!editing" label="代收货款">代收货款</el-radio>
                                         <el-radio :disabled="!editing" label="破损">破损</el-radio>
                                         <el-radio :disabled="!editing" label="污染">污染</el-radio>
                                         <el-radio :disabled="!editing" label="地址变更">地址变更</el-radio>
                                         <br>
                                         <el-radio :disabled="!editing" label="错分">错分</el-radio>
                                         <el-radio :disabled="!editing" label="拒收">拒收</el-radio>
                                     </el-radio-group>
                                </el-form-item>
                                <el-form-item label="备注消息：" v-if="specialLabel">
                                    <el-input style="width: 50%" :disabled="!editing" v-model="editParams.region_mark"></el-input>
                                </el-form-item>
                                <el-form-item label="取件码：">
                                    <p>{{editParams.take_code}}</p>
                                </el-form-item>
                                <el-form-item label="配送方式：" prop="type">
                                    <el-select v-model="editParams.type" :disabled="!editing"  filterable placeholder="请选择快件配送方式">
                                        <el-option
                                            v-for="(v,k) in type"
                                            :key="k"
                                            :label="v"
                                            :value="k">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                 <el-form-item label="派件员：" prop="courier_id">
                                    <el-select v-model="editParams.courier_id" :disabled="!editing"  filterable placeholder="请选择派送员">
                                        <el-option
                                            v-for="(v,k) in staffData"
                                            :key="k"
                                            :label="v.name"
                                            :value="v.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="入库时间：">
                                    <p>{{editParams.created_at}}</p>
                                </el-form-item>
                                <el-form-item label="佣金：">
                                    <p>{{editParams.price}}元</p>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="操作日志" name="log">
                            <el-table :data="logData.data" style="width: 100%" >
                                <el-table-column prop="created_at">
                                </el-table-column>
                                <el-table-column >
                                    <template slot-scope="scope">
                                        <el-row>
                                            {{scope.row.name}}{{scope.row.operation}}
                                        </el-row>
                                        <el-row v-if="scope.row.history!=null&&scope.row.actuality!=null">
                                            <p>修改前：<br><span v-for="(item,index) in scope.row.history">{{index}}:{{item}}<br></span></p>
                                            <p>修改后：<br><span v-for="(item,index) in scope.row.actuality">{{index}}:{{item}}<br></span></p>
                                        </el-row>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination @size-change="sizeChangeForLog" @current-change="currentChangeForLog"
                                           :current-page="queryLogParams.page"
                                           :page-sizes="[3, 5, 10, 20]"
                                           :page-size="queryLogParams.paginate"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="logData.total">
                                </el-pagination>
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
             </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from '../apis'
    import Vue from 'vue';
    import { mapState } from 'vuex'
    export default {
        name: "Express",
        data(){
            return {
                listLoading:false,
                //新增对话框开关
                createDialog:false,
                //编辑对话框开关
                editDialog:false,
                //编辑对话框按钮显示隐藏状态
                editBtn:true,
                //是否开启修改
                editing:false,
                //列表请求参数
                queryParams:{
                    service_id:'',
                    single_number:'',
                    status:'',
                    page:1,
                    paginate:10,
                },
                //修改请求参数
                editParams:{

                },
                //快件列表数据
                expressData:{
                    data:[],
                    total:0,
                },
                //日志列表数据
                logData:{
                    data:[],
                    total:0,
                },
                //站点关联网点数据
                networkData:{
                    data:[],
                },
                //修改验证规则
                editRule:{

                },
                //请求日志列表参数
                queryLogParams:{
                    page:1,
                    paginate:10,
                    order_id:'',
                },
                //请求日志列表标识
                queryLogStatus:false,
                //状态数组
                status:[
                    '暂存',
                    '配送中',
                    '待取件',
                    '已取件',
                    '投诉中',
                    '异常件',
                    '已退回',
                ],
                // 类型数组
                type:[
                    '派送件',
                    '自提件',
                    '寄送件'
                ],
                //修改对话框默认标签页
                activeNameForEdit:'info',
                //特殊标记
                specialLabel:false,
                //下拉站点列表数据
                stationList:[
                    {
                        designation:"全部",
                        id:-1,
                    }
                ],
                //派送员列表
                staffData:[

                ],
            }
        },
        methods:{
            /**
             * 请求快件列表
             */
            queryExpress(){
                this.listLoading = true;
                api.express.fetch(this.queryParams).then(response=>{
                    this.expressData = response.data;
                    this.listLoading = false;
                }).catch(errors=>{
                    this.$message.error('请求失败');
                });
            },
            /**
             * 筛选站点
             */
            serviceChange(val){
                this.queryParams.service_id = val;
                this.queryExpress();
            },
            /**
             * 筛选快件类型
             */
            typeChange(val){
                this.queryParams.type = val;
                this.queryExpress();
            },
            /**
             * 筛选快件状态
             */
            statusChange(val){
                this.queryParams.status = val;
                this.queryExpress();
            },
            /**
             * 列表行选中
             * @param row
             * @param event
             * @param column
             * @param column
             */
            rowClick(row, event, column){
                this.editDialog = true;
                this.fetchById(row.id);
            },
            /**
             * 根据id获取站点信息
             */
            fetchById(id){
                api.express.fetchById(id).then(response=>{
                    this.editParams = response.data.data;
                    if(this.editParams.label=='代收货款'){
                        this.specialLabel = true;
                    }
                    if(this.editParams.label===null){
                        this.editParams.label='';
                    }
                    this.queryNetwork(this.editParams.service_id);
                }).catch(errors=>{
                    this.$message.error('请求失败');
                });
            },
            /**
             * 修改对话框点击修改按钮
             */
            enableEdit(){
                this.editing = true;
            },
            /**
             * 修改请求
             */
            editQuery(){
                api.express.update(this.editParams.id,this.editParams).then(response=>{
                    for(let i in this.expressData.data){
                        if(this.editParams.id == this.expressData.data[i].id){
                            Vue.set(this.expressData.data,i,response.data.data);
                            break;
                        }
                    }
                    this.$message.success('修改成功');
                    this.handleEditClose();
                }).catch(errors=>{
                    this.$message.error('请求失败');
                })
            },
            /**
             * 删除请求
             */
            delQuery(){
                this.$confirm('确认删除快件？', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.express.destroy(this.editParams.id).then(response=>{
                        this.editDialog = false;
                        this.queryExpress();
                    }).catch(errors=>{
                        this.$message.error(errors.response.data.resultMessage);
                    });
                }).catch(() => {

                });
            },
            /**
             * 快件列表改变每页数量
             * @param size
             */
            sizeChange(size){
                this.queryParams.paginate = size;
                this.queryExpress();
            },
            /**
             * 日志列表改变每页数量
             */
            sizeChangeForLog(size){
                this.queryLogParams.paginate = size;
                this.queryLog();
            },
            /**
             * 快件列表改变当前页
             * @param page
             */
            currentChange(page){
                this.queryParams.page = page;
                this.queryExpress();
            },
            /**
             * 子站点列表改变当前页
             */
            currentChangeForLog(page){
                this.queryLogParams.page = page;
                this.queryLog();
            },
            /**
             * 关闭编辑对话框
             */
            handleEditClose(){
                this.editParams = {};
                this.editDialog = false;
                this.editBtn = true;
                this.editing = false;
                this.queryLogParams.paginate = 5;
                this.queryLogParams.page = 1;
                this.specialLabel = false;
            },
            /**
             * 修改对话框标签切换
             */
            tabClickForEdit(tab,event){
                if(tab.name=="log"){
                    if(this.queryLogStatus==false){
                        this.queryLog();
                    }
                    this.editBtn = false;
                }else{
                    this.editBtn = true;
                }
            },
            /**
             * 获取日志列表
             */
            queryLog(){
                api.log.fetch(this.queryLogParams).then(response=>{
                    this.logData = response.data;
                    this.queryLogStatus = true;
                }).catch(errors=>{
                    this.$message.error('请求失败');
                })
            },
            /**
             * 获取当前快件站点关联的网点
             */
            queryNetwork(id){
                api.station.network({service_id:id}).then(response=>{
                    this.networkData = response.data;
                }).catch(errors=>{

                })
            },
            /**
             * 标记切换
             * @param val
             */
            labelChange(val){
                // console.log(val)
                this.specialLabel = val=='代收货款'?true:false;
                if(val == "错分" || val == "拒收"){
                    if(this.editParams.status < 5){
                        this.editParams.status = 6;
                    }
                }
            },
            /**
             * 获取站点列表
             */
            fetchStationList(){
                api.express.fetchStations().then(response=>{
                    for(let i in response.data.data){
                        if(response.data.data[i].id ==this.user.service_id){
                            response.data.data[i].designation += '(当前站点)';
                        }
                        break;
                    }
                    this.stationList = this.stationList.concat(response.data.data);
                }).catch(errors=>{

                })
            },
            /**
             * 获取员工列表
             */
            fetchStaffList(){
                api.staff.fetch().then(response=>{
                    this.staffData = response.data.data;
                }).catch(errors=>{

                })
            }
        },
        computed:{
            ...mapState ({
                user: state => state.account.user,
            }),
        },
        mounted (){
            this.queryExpress();
            this.fetchStationList();
            this.queryParams.service_id = this.user.service_id;
            this.fetchStaffList();
        }
    }
</script>

<style lang="scss" scoped>
    /* 日历插件样式 */
    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 100%;
    }
    .el-range-editor.is-active, .el-range-editor.is-active:hover {
        border-color: #e6a23c;
    }
    .el-radio+.el-radio {
        margin-left: 16px;
    }
    /* 模拟框中的form item */
    .el-form-item {
        margin-bottom: 5px;
    }
    .el-form-item__content {
        line-height: 30px;
    }
</style>
<style lang="scss">
    .el-date-table td.available:hover {
        color: #e6a23c;
    }
    .el-date-table td.today span {
        color: #e6a23c;
    }
    .el-date-table td.end-date span, .el-date-table td.start-date span,
    .el-date-table td.end-date span, .el-date-table td.start-date span {
        background-color: #e6a23c;
    }
    /* 搜索框样式 */
    .el-input.is-active .el-input__inner, .el-input__inner:focus {
        border-color: #e6a23c;
    }
</style>
